<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>微博发布</title>
    <link rel="stylesheet" href="css/index_work.css">
    <script type="text/javascript" src="js/jquery-1.7.2.js"></script>
    <script type="text/javascript">
        $(function () {
            //发布功能ic

            $("#fbBtn").click(function () {
                //获取用户输入的标题作者内容
                var title = $("#title").val();
                var author = $("#author").val();
                var content = $("#content").val();
                //将微博信息显示在下方的table中
                var tr = "<tr>";
                tr += "<td><input type='checkbox' class='ck'></td>";
                tr += "<td>"+title+"</td>";
                tr += "<td>"+author+"</td>";
                tr += "<td>"+content+"</td>";
                tr += "<td>"+new Date().toLocaleString()+"</td>";
                tr += "<td><input type='button' value='删除' class='deleteBtn'></td>";
                tr += "</tr>";
                //$("#weboList>tbody>tr:eq(1)").after(tr);
                $("#weboList tr:eq(1)").after(tr);
                $(":text").val("");
            });
            //全选
            $("#qx").click(function () {
                $(":checkbox").prop("checked", true);
            });
            //全不选
            $("#qbx").click(function () {
                $(":checkbox").prop("checked", false);
            });
            //反选
            $("#fx").click(function () {
                $(".ck").each(function () {
                    /*if($(this).prop("checked")){
                        $(this).prop("checked", false);
                    }else{
                        $(this).prop("checked", true);
                    }*/
                    if(this.checked){
                        this.checked = false;
                    }else{
                        this.checked = true;
                    }
                });
            });
            //通过复选框统一控制所有复选框的选中或不选中
            $("#selectAll").click(function () {
                $(".ck").prop("checked", $(this).prop("checked"));
            });
            //将统一操作的复选框和所有复选框的选中或不选中状态保持一致
            $("#weboList").on("click", ".ck", function () {
                if($(".ck").length == $(".ck:checked").length){
                    $("#selectAll").prop("checked", true);
                }else{
                    $("#selectAll").prop("checked", false);
                }
            });
            //删除功能
            $("#weboList").on("click", ".deleteBtn", function () {
                if(confirm("确认删除吗？")){
                    $(this).parent().parent().remove();
                }
            });
            //批量删除功能
            $("#deleteMore").click(function () {
                if(confirm("确认删除吗？")) {
                    $(".ck:checked").parent().parent().remove();
                }
            });
        });
    </script>
</head>
<body>

    <table>
        <tr>
            <th colspan="2">微博发布</th>
        </tr>
        <tr>
            <td>标题</td>
            <td>
                <input type="text" id="title">
            </td>
        </tr>
        <tr>
            <td>作者</td>
            <td>
                <input type="text" id="author">
            </td>
        </tr>
        <tr>
            <td>内容</td>
            <td>
                <input type="text" id="content">
            </td>
        </tr>
        <tr>
            <td colspan="2">
                <input type="button" id="fbBtn" value="发布">
            </td>
        </tr>
    </table>

    <table style="margin-top: 50px;" id="weboList">
        <tr>
            <th colspan="6">微博列表</th>
        </tr>
        <tr>
            <th>
                <input type="checkbox" id="selectAll">
            </th>
            <th>标题</th>
            <th>作者</th>
            <th>内容</th>
            <th>发布时间</th>
            <th>操作</th>
        </tr>
        <tr>
            <td colspan="6">
                <input type="button" id="qx" value="全选">
                <input type="button" id="qbx" value="全不选">
                <input type="button" id="fx" value="反选">
                <input type="button" id="deleteMore" value="批量删除">
            </td>
        </tr>
    </table>

</body>
</html>